<template>
    <div class="time">
        {{ timeInfo.dateYear }} {{ timeInfo.dateWeek }} {{ timeInfo.dateDay }}
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'

let timeInfo = ref({
    setInterval: 0,
    dateDay: '',
    dateYear: '',
    dateWeek: ''
})

const WEEK = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
const formatTime = (time, fmt) => {
    if (!time) return ''
    const date = new Date(time)
    const o = {
        'M+': date.getMonth() + 1,
        'd+': date.getDate(),
        'H+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds(),
        'q+': Math.floor((date.getMonth() + 3) / 3),
        S: date.getMilliseconds(),
    }
    if (/(y+)/.test(fmt))
        fmt = fmt.replace(
            RegExp.$1,
            (date.getFullYear() + '').substr(4 - RegExp.$1.length)
        )
    for (const k in o) {
        if (new RegExp('(' + k + ')').test(fmt)) {
            fmt = fmt.replace(
                RegExp.$1,
                // @ts-ignore: Unreachable code error
                RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
            )
        }
    }
    return fmt
}
const handleTime = () => {
    timeInfo.value.setInterval = setInterval(() => {
        const date = new Date()
        timeInfo.value.dateDay= formatTime(date, 'HH: mm: ss')
        timeInfo.value.dateYear = formatTime(date, 'yyyy-MM-dd')
        timeInfo.value.dateWeek = WEEK[date.getDay()]
    }, 1000)
}
onMounted(() => {
    handleTime();
})
</script>

<style lang="scss" scoped></style>